<template>
  <div class="radio-group">
    <label v-if="label" class="radio-group-label">{{ label }}</label>
    <n-radio-group :value="modelValue" @update:value="handleChange">
      <n-space>
        <n-radio v-for="option in options" :key="option.value" :value="option.value">
          {{ option.label }}
        </n-radio>
      </n-space>
    </n-radio-group>
  </div>
</template>

<script setup lang="ts">
interface RadioOption {
  label: string
  value: string
}

interface Props {
  label?: string
  modelValue: string
  options: RadioOption[]
}

defineProps<Props>()

const emit = defineEmits<{
  'update:modelValue': [value: string]
}>()

const handleChange = (value: string) => {
  emit('update:modelValue', value)
}
</script>

<style scoped lang="less">
.radio-group {
  margin-bottom: 16px;

  .radio-group-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--n-text-color);
  }

  :deep(.n-radio-group) {
    .n-space {
      flex-wrap: wrap;
      gap: 8px;
    }

    .n-radio {
      margin: 0;
    }
  }
}
</style>